import React from 'react'
import './index.css'

function Item(props){
    const {id,name,done,dispatch} = props
    function handleCheckbox(id,e){
        dispatch({type:'checkedTodo',id,done:e.target.checked})
    }
    function handleBtn(id){
        dispatch({type:'delTodo',id})
    }
    return(
        <li>
            <label>
                <input type="checkbox" checked={done} onChange={e => handleCheckbox(id,e)}/>
                <span>{name}</span>
            </label>
            <button className="btn btn-danger" onClick={() => handleBtn(id)}>删除</button>
        </li>
    )
}

export default Item